<template>
  <div class="menuBar-box" @click="handleMenuBarClick">
    <div class="">
      <div class="navBox leftNavBox">
        <div
          class="navItem"
          v-for="(item, index) in rightFooterNav"
          :key="index"
        >
          <span v-if="item.title == 'views.index.market'">
            <a :href="item.url" target="_blank">{{ $t(item.title) }}</a>
          </span>

          <span v-else @click="goRouter(item.index)">
            {{ $t(item.title) }}
          </span>
        </div>
      </div>
      <div class="navBox rightNavBox">
        <div
          class="navItem"
          v-for="(item, index) in leftFooterNav"
          :key="index"
          @click="goRouter(item.url)"
        >
          <a :href="item.url" target="_blank"> {{ $t(item.title) }} </a>
        </div>
      </div>
      <div class="multilingualBox">
        <div
          class="langButton"
          type="text"
          @click="localeChange($store.state.lang == 'zh_ch' ? 'en' : 'zh_ch')"
        >
          <span
            :style="{ color: $store.state.lang != 'zh_ch' ? 'darkgray' : '' }"
            >中</span
          >/<span
            :style="{ color: $store.state.lang != 'en' ? 'darkgray' : '' }"
            >EN</span
          >
        </div>
        <!-- <span @click="localeChange('zh_ch')"> 中文</span> / <span @click="localeChange('en')">EN</span> -->
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      rightFooterNav: [
        {
          index: 0,
          title: "views.index.home",
        },
        {
          index: 1,
          title: "views.index.blurb",
        },
        {
          index: 2,
          title: "views.index.join",
        },
        {
          index: 3,
          title: "views.index.login",
        },
      ],
      leftFooterNav: [
        {
          url: "http://web.marsbox.site/public/whitepaper.pdf",
          title: "views.index.whitePaper",
        },

        {
          url: "https://www.marssociety.org",
          title: "views.index.marsAgreement",
        },
        {
          url: "https://www.binance.com",
          title: "views.index.market",
        },
        {
          url: "https://www.spacex.com",
          title: "SpaceX",
        },
      ],
    };
  },
  mounted() {
    // cipherLogin({ account: '95189024', password: '12345678', country_code: '852' }).then(res => {
    //     console.log(res);
    // })
    // submitJoinUs({ name: '95189024', email: '12345678' }).then(res => {
    //     console.log(res);
    // })
  },
  methods: {
    handleMenuBarClick(event) {
      if (
        !event.target.closest(".navItem") &&
        !event.target.closest(".multilingualBox") &&
        !event.target.closest(".navBox") &&
        !event.target.matches("a[href]")
      ) {
        let indexData = {
          showList: false,
        };
        this.$emit("menuBarfun", indexData);
      }
    },
    goRouter(index) {
      let indexData = {
        index: index,
        showList: false,
      };
      this.$emit("menuBarfun", indexData);
    },
    localeChange(lang) {
      this.$store.commit("setLang", { lang: lang });
      switch (lang) {
        case "zh_ch":
          this.$i18n.locale = "zhCN";
          break;
        case "en":
          this.$i18n.locale = "enUS";
          break;
      }
      this.$router.go();
    },
  },
};
</script>
<style lang="scss" scoped>
.menuBar-box {
  color: #fff;
  padding: 20px;
  height: 100%;
}

.leftNavBox {
  width: 250px;
  font-size: 36px;
  margin-top: 200px;
  line-height: 80px;
}

.rightNavBox {
  width: 200px;
  font-size: 30px;
  line-height: 60px;
  margin-top: 102px;
}

.multilingualBox {
  font-weight: bold;
  font-size: 36px;
  color: #ffffff;
  line-height: 40px;
  margin-top: 102px;
}
.langButton {
  padding: 0;
  // font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 32px;
  color: #ffffff !important;
  line-height: 40px;
}
</style>
